<%--
  Created by IntelliJ IDEA.
  User: root
  Date: 12/28/21
  Time: 9:33 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
</head>
<body>

<img id="preview_photo" src="" width="200px" height="200px"><br/>
<a href="javascript:void(0)" onclick="uploadPhoto()">上传头像</a>
<input type="file" id="photoFile" style="display: none;" onchange="upload()"><br/>
<p>昵称：<input type="text" id="fName"></p>
<button onclick="sava()">保存</button>

<style>
    img[src=""],img:not([src]){
        opacity:0;
    }
</style>
<script>
    var imgName;
    function uploadPhoto() {
        $("#photoFile").click();
    }


    /**
     * 上传图片
     */
    function upload() {
        if ($("#photoFile").val() == '') {
            return;
        }
        var formData = new FormData();
        formData.append('file', document.getElementById('photoFile').files[0]);
        $.ajax({
            url:"${pageContext.request.contextPath}/img",
            type:"post",
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                $("#preview_photo").attr("src", data.msg);
                imgName = data.msg;
                console.log(imgName);

            },
            error:function(data) {
                alert("上传失败")
            }
        });
    }
    function sava(){
        console.log(imgName)
        $.ajax({
            url: "${pageContext.request.contextPath}/imgUrl",
            type: "post",
            data: {"imgUrl":imgName, "fName": $("#fName").val()},
            success: function (data) {
                console.log(data);
            }
        });
    }
</script>
</body>
</html>
